<script setup> 
    import { Vue3SeamlessScroll } from "vue3-seamless-scroll"

    import avatar1 from '@/assets/images/grid/user-1.png'
    import avatar2 from '@/assets/images/grid/user-2.png'
    import avatar3 from '@/assets/images/grid/user-3.png'
    import avatar4 from '@/assets/images/grid/user-4.png'
    import avatar5 from '@/assets/images/grid/user-5.png'
    import avatar6 from '@/assets/images/grid/user-6.png'

    const avatar = [avatar1, avatar2, avatar3, avatar4, avatar5, avatar6]

    const props = defineProps({
        list: {
            type: Array,
            default: []
        }
    })

    let data = [
        { name: '林海', grid: '第一网格', post: '党支部书记兼村委会主任' },
        { name: '张共和', grid: '第二网格', post: '村委会副书记' },
        { name: '林极好', grid: '第二网格', post: '村党会副主任' },
        { name: '刘鹤', grid: '第三网格', post: '党支部宣传委员' },
        { name: '严兼', grid: '第三网格', post: '党支部纪检委员' },
        { name: '张禾禾', grid: '第二网格', post: '支部组织委员' },
    ]

</script>

<template>
    <div class="grid-member-warp card-box">
        <div class="card-title">
            <img src="../../../assets/images/card-title-icon-wangge.png">
            网格党员
        </div>

        <div class="list-wrap">
            <vue3-seamless-scroll 
                :list="props.list" 
                class="list-scrollbar"
                hover
                wheel
                :singleHeight="78"
                :singleWaitTime="3000"
                :delay="1000"
                :limitScrollNum="6"
            >
                <div class="item" v-for="(item, index) in props.list" :key="index">
                    <div class="flex">
                        <img :src="index > 5 ? avatar[5] : avatar[index]" alt="">
                        <div class="info">
                            <div class="name-wrap">
                                <span class="name">{{ item.name }}</span>
                                <span class="grid" :title="item.positionDicttext">{{ item.positionDicttext }}</span>
                            </div>
                            <div class="post" :title="item.remark">{{ item.remark }}</div>
                        </div>
                    </div>
                </div>
            </vue3-seamless-scroll>
        </div>

    </div>
</template>

<style lang="less" scoped>
    .grid-member-warp{
        height: 310px;
        margin-top: 10px;

        .list-scrollbar{
            height: 230px;
            // padding: 20px 20px 0;
            overflow: hidden;
        }

        .list-wrap{
            padding: 20px 20px 0;
        }
            
        .item{
            width: 50%;
            display: inline-block;
            margin-bottom: 20px;

            img{
                width: 58px;
                height: 58px;
            }

            .info{
                flex: 1;
                margin-left: 15px;
                color: #fff;
                
                .name-wrap{
                    padding-top: 5px;
                    font-size: 16px;
                    padding-bottom: 15px;
                    
                    .name{
                        display: inline-block;
                        width: 65px;
                    }

                    .grid{
                        color: #03E2FF;
                    }
                }

                .post{
                    width: 90%;
                    font-size: 14px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }

    }
</style>